<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .err {
      color: red;
    }

    .suc {
      color: green;
    }
  </style>
</head>

<body>
  <input type="text" id="name"><span id="username"></span>
  <button>确认</button>
</body>
<script>
  var username = document.getElementById('username')
  var button = document.getElementsByTagName("button")[0]
  button.onclick = function (e) {
    var name = document.getElementById('name')
    var reg = /ad/
    if (!reg.test(name.value)) {
      username.innerHTML = '账号有误'
      username.className = 'err'
      return
      console.log();
    }
    username.innerHTML = '账号正确'
    username.className = 'suc'
  }
  var name2 = document.getElementById('name')
  //onblur表示失去焦点后
  name2.onblur = function (e) {
    var reg = /^ad/  //  ^表示是否以xxx开头
    var reg1 = /ad$/   //是否以xxx结尾
    // /^ad$/ 精确匹配，完全一样才行
    var reg2 = /^ad$/
    var reg3 = /[a-z]/  //是否包小写字母中的任意一个
    var reg4 = /[0-9]/  //
    var reg5 = /[A-Z]/  //
    var reg6 = /[A-Z0-9a-z]/  //是否包含任意字母或数字
    var reg7 = /[0-9]{6,8}/  //是否包含任意字母或数字
    var reg8 = /(\d)(\w)/  //不要求连续
    var reg9 = /(\d\w)/  //必须连续
    var reg9 = /^[a-z0-9A-Z_]{5,10}$/  //
    /* 
    | {}大括号 | 量词符.  里面表示重复次数 |
      | -------- | ------------------------- |
      | []中括号 | 匹配方括号中的任意字符.   |
      | ()小括号 | 表示优先级                |
    */
    /* 
      {1}最少出现一次
      {2，}有至少连续两个数字，分散出现不算
      {2，3}有至少连续两个数字 分散出现不算
    */
    /* 
      *星号：可有可无，出现0次或多次  
      +加号 至少出现一次
      ？问号 出现1或0次
    */
    //  /^[0-9]*/
    //  
    console.log('^表示是否以xxx开头=' + reg.test(this.value))
    console.log('表示是否以xxx结尾=' + reg1.test(this.value))
    console.log('表示是否是xxx=' + reg2.test(this.value))
    console.log('是否包小写字母中的任意一个=' + reg3.test(this.value))
    console.log('是否包数字中的任意一个=' + reg4.test(this.value))
    console.log('是否包任意一个=' + reg6.test(this.value))
    console.log('是数值范围=' + reg7.test(this.value))
    console.log('/(\d)(\w)/=' + reg8.test(this.value))
    console.log('/(\d\w)/=' + reg9.test(this.value))
    console.log('----------------------------')
  }
</script>

</html>